var DragTableSetting = function () {
  var DefaultTableSetting = function () {
    var template = /* html */ `
      <div style="padding:0 20px 5px">
        <el-form inline size="small">
          <el-form-item label="行数">
            <el-input-number v-model="rowNum" :controls="false" :min="1" :precision="0" style="width:200px">
            </el-input-number>
          </el-form-item>
          <el-form-item label="列数">
            <el-input-number v-model="colNum" :controls="false" :min="1" :precision="0" style="width:200px">
            </el-input-number>
          </el-form-item>
        </el-form>
        <div style="text-align:center">
          <el-button size="samll" type="primary" @click="ensure">确定</el-button>
        </div>
      </div>
    `;

    return {
      data: function () {
        return {
          rowNum: undefined,
          colNum: undefined
        };
      },

      methods: {
        ensure: function () {
          var rowNum = this.rowNum;
          if (rowNum === undefined) {
            this.$message('请输入行数');
            return;
          }
          var colNum = this.colNum;
          if (colNum === undefined) {
            this.$message('请输入列数');
            return;
          }
          this.$emit('ensure', {
            rowNum: rowNum,
            colNum: colNum
          });
        }
      },

      template: template
    };
  }();

  var DragTableSettingDialog = function () {
    var template = /* html */ `
      <div class="drag-table-setting-dialog" style="padding:0 20px 5px">
        <el-form inline size="small">
          <el-form-item label="可拖拽区域高度">
            <el-input-number v-model="height" :controls="false" :min="50" :precision="0" style="width:200px">
            </el-input-number>
          </el-form-item>
        </el-form>
        <div style="text-align:center">
          <el-button size="samll" type="primary" @click="ensure">确定</el-button>
        </div>
      </div>
    `;

    return {
      props: {
        config: {
          type: Object,
          required: true
        }
      },

      data: function () {
        return {
          height: this.config.dragConfig.height
        };
      },

      methods: {
        ensure: function () {
          var height = this.height;
          if (height === undefined) {
            this.$message('请输入可拖拽区域高度');
            return;
          }
          this.config.dragConfig.height = height;
          this.$emit('setting-success')
        }
      },

      template: template
    };
  }();

  var EditRichCompl = function () {
    var template = /* html */ `
      <div style="padding:0 20px 5px;height:calc(100% - 5px);overflow:auto" v-loading.fullscreen.lock="loading">
        <rich-editor v-model="dataText" ref="richEditor">
          <template slot="append">
            <el-button type="primary" size="medium" @click="ensure">确定</el-button>
          </template>
        </rich-editor>
      </div>
    `;
    return {
      props: {
        option: {
          type: Object,
          required: true
        }
      },

      data: function () {
        var option = this.option;
        var tableData = option.tableData;
        var rowIndex = option.rowIndex;
        var colIndex = option.colIndex;
        return {
          loading: false,
          dataText: tableData[rowIndex][colIndex]
        };
      },

      methods: {
        ensure: function () {
          var self = this;
          this.loading = true;
          this.$refs.richEditor.calContent().then(function () {
            var dataText = self.dataText;
            var option = self.option;
            var tableData = option.tableData;
            var rowIndex = option.rowIndex;
            var colIndex = option.colIndex;
            tableData[rowIndex][colIndex] = dataText;

            self.$emit('edit-close', dataText);
            self.loading = false;
          }).catch(function () {
            self.loading = false;
          });
        }
      },

      components: {
        RichEditor: RichEditor
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="drag-table-setting" :style="{height:dragConfig.height+'px'}">
      <div class="drag-table-setting-line" v-if="isLine"></div>
      <div class="drag-table-setting-btns" v-if="!isPrint">
        <el-button size="mini" type="primary" @click="toSettingConfig">配置</el-button>
        <el-button v-if="config.showConfig.otherTable" size="mini" type="primary" @click="addTable">添加自定义表格</el-button>
      </div>

      <div class="drag-table-setting-content" :key="dragId">
        <sys-drag-resize v-if="hasProjectImg" :config="dragConfig.projectImgConfig" title="工程图" :min-width="100" :min-height="100"
          :disabled="isPrint":is-line="isLine">
          <div class="product-image-div">
            <div v-if="mode==='test'" class="no-data">
              <div>图片区域</div>
            </div>
            <template v-else>
              <div v-if="data.projectPicUrl===''" class="no-data">
                <div>无工程图</div>
              </div>
              <el-image v-else :src="data.projectPicUrl" class="product-image" fit="contain">
            </template>
          </div>
        </sys-drag-resize>

        <template v-if="config.showConfig.otherTable">
        <template v-for="otherTable in otherTableList">
          <sys-drag-resize has-delete :key="otherTable.id" :config="otherTable" title="自定义表格" :disabled="isPrint" :min-width="otherTable.minWidth"
            :min-height="otherTable.minHeight" :is-line="isLine" @delete="deleteTable(otherTable)">
            <other-table-item :config="otherTable" @edit-rich-text="editRichText" :is-print="isPrint"></other-table-item>
          </sys-drag-resize>
        </template>
        </template>
      </div>

      <el-dialog append-to-body :title="dialogTitle" :visible.sync="openDialog" width="600px" top="calc(50vh - 140px)" @closed="dialogClosed">
        <div style="height:110px;overflow:auto">
          <template v-if="openDialog">
            <default-table-setting v-if="dialogType==='table'" @ensure="toAddTable"></default-table-setting>
            <drag-table-setting-dialog v-else-if="dialogType==='setting'" :config="config" @setting-success="settingSuccess"></drag-table-setting-dialog>
          </template>
        </div>
      </el-dialog>

      <el-dialog fullscreen append-to-body class="dialog-fullscreen" title="编辑文本" :visible.sync="openEdit" @click="editClosed">
        <div style="height:100%;overflow:auto">
          <edit-rich-compl v-if="openEdit" :option="richOption" @edit-close="openEdit=false"></edit-rich-compl>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      },
      data: Object
    },

    inject: {
      templProp: {
        default: function () {
          return {};
        }
      }
    },

    computed: {
      dragConfig: function () {
        return this.config.dragConfig
      },
      otherTableList: function () {
        return this.dragConfig.otherTableList;
      },
      mode: function () {
        return this.data.mode;
      },
      isPrint: function () {
        return this.templProp.isPrint;
      },
      isLine: function () {
        return this.templProp.isLine;
      },
      hasProjectImg: function () {
        if (!this.config.showConfig.projectImg) {
          return false;
        }

        var isPrint = this.isPrint;
        if (!isPrint) {
          return true;
        }

        var projectPicUrl = this.data.projectPicUrl;
        if (SysUtil.isEmpty(projectPicUrl)) {
          return false;
        }
        return true;
      }
    },

    data: function () {
      return {
        dragId: SysUtil.getId(),
        openDialog: false,
        dialogType: '',
        dialogTitle: '',
        openEdit: false,
        richOption: null
      };
    },

    methods: {
      toSettingConfig: function () {
        this.dialogTitle = '工程图与自定义表格设置';
        this.dialogType = 'setting';
        this.openDialog = true;
      },

      addTable: function () {
        this.dialogTitle = '自定义表格';
        this.dialogType = 'table';
        this.openDialog = true;
      },

      toAddTable: function (option) {
        this.openDialog = false;
        this.dragConfig.addTable(option);
      },

      settingSuccess: function () {
        this.openDialog = false;
        this.dragId = SysUtil.getId();
      },

      dialogClosed: function () {
        this.dialogTitle = '';
        this.dialogType = '';
      },

      deleteTable: function (otherTable) {
        this.dragConfig.deleteTable(otherTable.id);
      },

      editRichText: function (option) {
        this.richOption = option;
        this.openEdit = true;
      },

      editClosed: function () {
        this.richOption = null;
      },

      checkValid: function () {
        var showConfig = this.config.showConfig;
        var dragConfig = this.dragConfig;
        var elRect = SysUtil.getElRect(this.$el);
        if (showConfig.projectImg) {
          var projectPicUrl = this.data.projectPicUrl;
          if (this.mode==='test' || !SysUtil.isEmpty(projectPicUrl)) {
            var code = dragConfig.checkProjectImgValid(elRect);
            if (code !== '') {
              var msg = i18n.getMsg(`produceOrder.error.${code}`);
              this.$alert(msg);
              return false;
            }
          }
        }

        if (showConfig.otherTable) {
          var code = dragConfig.checkOtherTableValid(elRect);
          if (code !== '') {
            var msg = i18n.getMsg(`produceOrder.error.${code}`);
            this.$alert(msg);
            return false;
          }
        }
        return true;
      }
    },

    components: {
      SysDragResize: SysDragResize,
      DefaultTableSetting: DefaultTableSetting,
      OtherTableItem: OtherTableItem,
      DragTableSettingDialog: DragTableSettingDialog,
      EditRichCompl: EditRichCompl
    },

    template: template
  };
}();
